<template>
  <div>
    <van-nav-bar
      title="新增更新"
      right-text="添加"
      @click-right="addUpdate"
    />
    <div class="item" >
      <div @click="selection.type = 'from'" :class="['version-info',selection.type == 'from'?'focus':'']" v-html="fromVersion" ></div>
      <van-icon name="arrow"/>
      <div @click="selection.type = 'to'" :class="['version-info',selection.type == 'to'?'focus':'']" v-html="toVersion"></div>
      <div class="tag" >
        <van-tag :type="version.diff?'success':''">
          <div @click="version.diff = !version.diff">差分</div>
        </van-tag>
        <van-tag :type="version.force?'danger':''">
          <div @click="version.force = !version.force">强制</div>
        </van-tag>
      </div>
    </div>
    <div class="list">
      <BaseList ref="list"  :option="listOption" @load="getVersions" >
        <div slot-scope="props" slot="item">
          <div class="item" @click="selectVersion(props.data)">
              <span class="version-info">版本:{{props.data.VersionName}}<br/>{{props.data.VersionCode}}</span>
              <div class="tag">
                  <span v-if="props.data.VersionName == latestVersion.VersionName && props.data.VersionCode == latestVersion.VersionCode" class="latest-version">最新</span>
              </div>
          </div>
        </div>
      </BaseList>
    </div>
  </div>
</template>

<script>
import BaseList from '@/components/common/Baselist'
import { Toast } from 'vant'
export default {
  name: 'addupdate',
  components: { BaseList },
  computed: {
    fromVersion() {
      return !(this.version.FromVersionName && this.version.FromVersionCode)
        ? '未选择'
        : `版本:<span>${this.version.FromVersionName}<br/>${
            this.version.FromVersionCode
          }</span>`
    },
    toVersion() {
      return !(this.version.VersionName && this.version.VersionCode)
        ? '未选择'
        : `版本:<span>${this.version.VersionName}<br/>${
            this.version.VersionCode
          }</span>`
    }
  },
  data() {
    return {
      selection: {
        type: 'from'
      },
      version: {
        force: false,
        diff: false
      },
      latestVersion: {},
      versions: [],
      pageIndex: 0,
      listOption: {
        needRefresh: false,
        needLoadMore: true
      }
    }
  },
  props: {
    appType: {},
    buildType: {}
  },
  methods: {
    selectVersion(version) {
      if (this.selection.type == 'from') {
        this.version = {
          ...this.version,
          FromVersionName: version.VersionName,
          FromVersionCode: version.VersionCode,
          FromDownloadUrl: version.DownloadUrl
        }
      } else if ((this.selection.type = 'to')) {
        this.version = {
          ...this.version,
          VersionName: version.VersionName,
          VersionCode: version.VersionCode,
          DownloadUrl: version.DownloadUrl
        }
      }
    },
    addUpdate() {
      const {
        FromVersionName,
        FromVersionCode,
        VersionName,
        VersionCode,
        DownloadUrl,
        FromDownloadUrl,
        force,
        diff
      } = this.version
      if (
        FromVersionName &&
        FromVersionCode &&
        VersionName &&
        VersionCode &&
        DownloadUrl
      ) {
        const data = {
          versionCode: VersionCode,
          versionName: VersionName,
          appType: this.appType,
          buildType: this.buildType,
          downloadUrl: DownloadUrl,
          fromDownloadUrl: FromDownloadUrl,
          FromVersionCode,
          FromVersionName,
          isForce: force || false,
          isPatch: diff || false
        }
        this.$axios.post('/api/publishVersion', data).then(res => {
          if (res.data.result == 'success') {
            this.$toast('发布成功')
          } else {
            this.$toast(res.data.msg || '发布成功')
          }
        })
      } else {
        this.$toast('版本信息不能为空')
      }
    },
    getVersions(type) {
      const data = {
        params: {
          appType: this.appType,
          buildType: this.buildType,
          published: true
        }
      }
      this.$axios.get('/api/versions', data).then(res => {
        let data = []
        if (res.data.result == 'success') {
          data = data.concat(res.data.data)
        } else {
          Toast(res.data.msg)
        }
        if (type == 0) {
          this.pageIndex = 0
          this.versions = []
        } else {
          this.pageIndex++
        }
        this.versions = this.versions.concat(data)
        let latest = null
        this.versions.forEach(d1 => {
          if (!latest || latest['VersionName'] < d1['VersionName']) {
            latest = d1
          }
        })
        this.latestVersion = latest
        this.$refs.list.onDataChange(this.versions, true)
      })
    }
  }
}
</script>

<style scoped>
.list {
  height: 300px;
  flex: 1;
  overflow: scroll;
}
.item {
  margin: 10px;
  border-width: 1px;
  border-style: solid;
  border-color: beige;
  position: relative;
  padding: 8px;
  flex: 1;
  display: flex;
  align-items: center;
}
.version-info {
  display: inline-block;
  font-size: 14px;
  color: #777777;
  flex: 1;
}
.tag {
  position: absolute;
  right: 5px;
  top: 5px;
  font-size: 12px;
  color: white;
}
.force-update {
  padding: 3px;
  border-radius: 3px;
  background-color: #ff5651;
}
.latest-version {
  padding: 3px;
  border-radius: 3px;
  background-color: #0093ff;
}
.focus {
  border-width: 2px;
  border-color: #c8d686;
  border-style: solid;
  box-shadow: 1px 1px 3px #c8d686;
}
</style>
